<template>
	<view class="container">
		<!--头部start-->
		<!--<view class="header">
			<u-status-bar></u-status-bar>
			<view class="index_header">
				<text>信誉值</text>
				<text class="on">信誉明细</text>
				<image src="/static/images/img_31.png" mode="widthFix" class="h_close_img"></image>
			</view>
		</view>
		<u-status-bar></u-status-bar>-->
		<!--头部end-->
		
		<!--信誉明细start-->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="credit_detial">
				<view class="credit_li">
					<view class="left">晋升一星会员<text>2022-10-09 23:21</text></view>
					<view class="right">
						<view class="num on">+5</view>
						<view class="nums"><text>当前信誉</text>73.5</view>
					</view>
				</view>
				<view class="credit_li" :id="'num'+item.id" v-for="(item,key) in result" :key="key">
					<view class="left">解除交易<text>2022-10-09 23:21</text></view>
					<view class="right">
						<view class="num">-5</view>
						<view class="nums"><text>当前信誉</text>73.5</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<!--信誉明细end-->
		
		
	</view>
</template>


<script>
/**
 * 1、mescroll插件市场来源：https://ext.dcloud.net.cn/plugin?id=343
 * 2、官网文档：https://www.mescroll.com/uni.html
 * 3、使用此插件所需要本页面代码外，还需以下2处文件：uni_modules/mescroll-uni、static/mescroll-uni
 * 4、使用方法指引：
 *    4.1、修改ajax请求网址url；
 *    4.2、列表数据循环元素体：mescroll-swiper/me-list.vue
 *    4.3、容器默认高度是100%，如果要自动高则在<mescroll-body height="auto"...即可
 *    4.4、下拉刷新时执行重置：this.mescroll.resetUpScroll()
 */
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
    // 使用mixin（在main.js自动注册全局组件)
    mixins: [MescrollMixin],
    data() {
        return {
            /*mescroll swiper S*/
            //数据列表
            result: [],
            //设置api路径
            api_url : 'demo/waterfall',
            /*mescroll swiper E*/
        }
    },
    methods: {
        /**
         * 瀑布流加载分页，上拉加载的回调: 其中page.num为当前页从1开始, page.size为每页数据条数（默认10）
         */
        upCallback(page) {
            self = this;
            //获取api数据
            this.ajax({
                url: self.api_url,
                data:{
                    page: page.num,
                    pagesize: page.size
                }
            }).then(res => {
                //如果res.list不是object则赋值为空对象[]
                let result_ = (typeof(res.data.data)=='object')?res.data.data:[];
                let result_length = result_.length;
                //如果是第一页，则将列表数据清空
                if(page.num == 1)
                    self.list = [];
                //数据去重：防止最近产生的新数据导致有重复数据
                result_ = self.$my.filterSame(result_, self.result);
                //设置列表数据
                self.result = self.$my.join(self.result, result_); //追加新数据
                //api获取成功，隐藏下拉刷新和上拉加载的状态（延时0.3秒再关闭加载动画，视觉效果更踏实）
                //特别注意: 这里加setimeout延时可能会导致mescroll-more插件 (快速上滑加载分页会异常中断)
                setTimeout(() => {
                    this.mescroll.endSuccess(result_length);
                },10);
            }).catch(()=>{
                //联网失败, 结束加载
                this.mescroll.endErr();
            });
        }
    }
}
</script>

<style lang="scss">
	@import url("../../common/style.scss");
	@import url("my.scss");
</style>